<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 出库日志',
    enablePullDownRefresh:false,
    onReachBottomDistance:100,
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const query_class_chked_rs = ref([''])
const categoryList = ref([
  {
    label: '幸运礼盒',
    value: '676213',
  },
  {
    label: '幸运礼盒2',
    value: '678214',
  },
])
const query_sb_chked_rs = ref([])
const sbList = ref(['17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007', '17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007',
])
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
const dataList = ref([]) // 列表数据
const total = ref(50) // 总数据量
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
// function loadMore() {
//   console.log('滚动到底部加载更多数据')
//   getPayList({ page: page.value }).then((res: any) => {
//     console.log(res)
//     const { code, text } = res
//     if (code === 0) {
//       loadState.value = 'error'
//       uni.showToast({
//         title: text,
//         icon: 'none',
//       })

//       // uni.redirectTo({
//       //   url: '/pages/login/login',
//       // })
//     }
//   })
// }

const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  date: dayjs().format('YYYY-MM-DD HH:mm:ss'),

})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleEdit() {
  showEdit.value = true
  if (editRef.value) {
    editRef.value.reset()
  }
}
function handleClose() {
  showEdit.value = false
}
</script>

<template>
  <view class="wot-list-top-wrap">
    <wd-drop-menu class="drop-menu">
      <wd-drop-menu-item ref="dropMenu" title="按: 设备编号">
        <view class="drop-content">
          <view class="drop-label">
            设备编号（筛选）：
          </view>
          <view class="check-list">
            <wd-checkbox-group v-model="query_sb_chked_rs" inline>
              <wd-checkbox v-for="(item, index) in sbList" :key="item" :model-value="item">
                <span class="sb-num">{{ item }}</span>
                <span v-if="index === 1" class="modify-num">{{ index === 1 ? item : '' }}</span>
              </wd-checkbox>
            </wd-checkbox-group>
          </view>
          <view class="text-24rpx text-amber">
            <view>说明：</view>
            <view>
              选择则：按指条件查询，不选择则：查询所有
            </view>
          </view>
        </view>
      </wd-drop-menu-item>
      <wd-drop-menu-item ref="dropMenu" title="按: 设备编号">
        <view class="drop-content">
          <view class="drop-label">
            商品分类（筛选）：
          </view>
          <view class="check-list">
            <wd-checkbox-group v-model="query_class_chked_rs" inline>
              <wd-checkbox v-for="(item) in categoryList" :key="item.value" :model-value="item.value">
                <wd-tag bg-color="#7232dd" custom-class="tag">
                  {{ item.label }}
                </wd-tag>
                <wd-tag plain custom-class="tag" bg-color="#c8c9cc" color="#c8c9cc">
                  ID:{{ item.value }}
                </wd-tag>
              </wd-checkbox>
            </wd-checkbox-group>
          </view>
          <view class="text-24rpx text-amber">
            <view>说明：</view>
            <view>
              选择则：按指条件查询，不选择则：查询所有
            </view>
          </view>
        </view>
      </wd-drop-menu-item>
    </wd-drop-menu>
    <view class="confirm-btn">
      <wd-button type="primary" size="small" block @click="handleSubmit">
        筛选查询
      </wd-button>
    </view>
    <view class="wot-row wot-title">
      <wd-row>
        <wd-col :span="6">
          <view class="wot-item">
            商品名称
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            销量
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            设备ID
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            操作
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>
  <view v-if="dataList.length === 0" class="pt-20">
    <wd-status-tip image="content" tip="暂无内容" />
  </view>
  <view v-else class="wot-list pb-safe">
    <view v-for="(item, index) in dataList" :key="index" class="wot-row">
      <wd-row>
        <wd-col :span="6">
          <view class="wot-item">
            <wd-tag custom-class="tag" bg-color="#7232dd">
              幸运礼盒{{ index }}
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            12
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item font-sm">
            12312312
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            <wd-tag type="primary" custom-class="tag" @click="handleEdit()">
              修改
            </wd-tag>
          </view>
        </wd-col>
      </wd-row>
      <!-- <view class="font-sm px-30rpx pt-4rpx">
        备注：服务费可到账时间：24小时内
      </view> -->
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
  </view>
  <wd-action-sheet v-model="showEdit" title="【 编辑 > 出库 】" @close="handleClose">
    <view class="action-sheet-content">
      <wd-form ref="editRef" :model="formModel">
        <wd-cell-group>
          <wd-input
            v-model="formModel.name"
            label="标签名称"
            label-width="100px"
            prop="name"
            clearable
            placeholder="如：机器类型"
            :rules="[{ required: true, message: '标签名称不能为空' }]"
          />
          <wd-input
            v-model="formModel.price"
            label="标签说明"
            label-width="100px"
            prop="price"
            clearable
            placeholder="对类型备注"
            :rules="[{ required: true, message: '标签说明不能为空' }]"
          />
          <wd-input
            v-model="formModel.date"
            label="添加时间"
            label-width="100px"
            prop="coin"
            clearable
            readonly
          />
        </wd-cell-group>
      </wd-form>
    </view>
  </wd-action-sheet>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.scroll-view {
    height: calc(100vh - 360rpx - env(safe-area-inset-bottom));
}
.confirm-btn {
  padding: 20rpx;
  width: 80%;
  margin: auto;
}
.footer {
    padding: 30rpx;
    background-color: #fff;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    box-shadow: 0 0 10rpx rgba(0,0,0,.1);
}
.drop-menu{
  box-shadow: 0 2px 12px rgba(100,101,102,.12);

}
.drop-content{
    padding: 20rpx 40rpx;
    .check-list {
      padding: 20rpx 0;
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #e5e5e5;
    }
  }

:deep(.tag) {
  padding: 4rpx 10rpx;
  font-size: $uni-font-size-sm;
  line-height: 24rpx;
  margin-right: 10rpx;
}

.font-sm {
  font-size: $uni-font-size-sm;
  color: $uni-text-title;
}
.describe {
  color: $uni-color-yellow;
  padding: 40rpx;
  font-size: $uni-font-size-sm;
}
</style>
